<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" />

		<meta charset="utf-8">
		<script type="text/javascript" src="js/boot.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<title>车牌找人</title>
	</head>

	<body>
		<div id="page">
			<div class="navbar">
				<img class="navbar-left arrow" src="image/8_2fanhui.png" onclick="javascript:history.back();">
				<div class="nav-title">
				</div>
			</div>
			<div class="content">
				<div class="card-cell van-hairline--bottom">
					姓名
					<input class="cell-input" type="text" v-model="user.userName" />
				</div>
				<div class="card-cell van-hairline--bottom">
					手机号码
					<input class="cell-input" type="text" v-model="user.mobile" />
				</div>
				<div class="card-cell van-hairline--bottom">
					车牌号码
					<input class="cell-input" type="text" v-model="user.carNumber" />
				</div>
				<div class="card-cell van-hairline--bottom">
					颜色
					<input class="cell-input" type="text" v-model="user.color" />
				</div>
				<a @click="camera()" class="recharge">
					拍照
				</a>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		$(function() {
			//1.创建签名
			var data = createJsapiSignature(location.href);
			// alert(JSON.stringify(data));
			//2.验证
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: data.appId, // 必填，公众号的唯一标识
				timestamp: data.timestamp, // 必填，生成签名的时间戳
				nonceStr: data.nonceStr, // 必填，生成签名的随机串
				signature: data.signature, // 必填，签名，见附录1
				jsApiList: [
					'checkJsApi',
					'onMenuShareTimeline',
					'onMenuShareAppMessage',
					'onMenuShareQQ',
					'onMenuShareWeibo',
					'onMenuShareQZone',
					'hideMenuItems',
					'showMenuItems',
					'hideAllNonBaseMenuItem',
					'showAllNonBaseMenuItem',
					'translateVoice',
					'startRecord',
					'stopRecord',
					'onVoiceRecordEnd',
					'playVoice',
					'onVoicePlayEnd',
					'pauseVoice',
					'stopVoice',
					'uploadVoice',
					'downloadVoice',
					'chooseImage',
					'previewImage',
					'uploadImage',
					'getLocalImgData',
					'downloadImage',
					'getNetworkType',
					'openLocation',
					'getLocation',
					'hideOptionMenu',
					'showOptionMenu',
					'closeWindow',
					'scanQRCode',
					'chooseWXPay',
					'openProductSpecificView',
					'addCard',
					'chooseCard',
					'openCard'
				]
			});
			wx.ready(function() {
				wx.checkJsApi({
					jsApiList: ['uploadImage'],
					success: function(res) {
						//alert(JSON.stringify(res))
					}
				});
			});
			wx.error(function(res) {
				// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				console.log("error");
				console.log(res);
				console.log("error");
			});

			/**
			 * 创建签名
			 * @param url
			 */
			function createJsapiSignature(url) {
				var signature = {};
				$.ajax({
					url: "/any/wechat/wisonnt/createJsapiSignature.do",
					async: false,
					data: {
						url: url
					},
					type: "get",
					success: function(data) {
						signature = data;
					}
				})
				return signature;
			}
		});

		var app = new Vue({
			el: '#page',
			data: {
				user: {
					userName: '',
					mobile: '',
					carNumber: '',
					color: ''
				}
			},
			methods: {
				//选取图片或者从相机获取
				camera() {
					//alert("ok");
					var that = this;
					wx.chooseImage({
						count: 1, // 默认9
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function(res) {
							//$("#img").attr("src", res.localIds);
							that.uploadImg(res.localIds);
							// alert(res.localIds);
						}
					});
				},
				//上传图片
				uploadImg(localId) {
					var that = this;
					//坑逼的腾讯(这边还不能使用数组进行传递)
					wx.uploadImage({
						localId: localId[0], // 需要上传的图片的本地ID，由chooseImage接口获得
						success: function(res) {
							var serverId = res.serverId; // 返回图片的服务器端ID
							$.get("/any/wechat/wisonnt/uploadImage.do", {
								media_id: serverId
							}, function(page) {
								if(page.success) {
									// that.imageUrl = page.data;
									// alert(page.data);
									http.get("/baidu/txt/licensePlate.do?path=" + page.data, function(page) {
										if(page.success) {
											var user = page.data;
											that.user = user;
											http.get("/device/kt/getUserByCar.do?carNumber=" + user.carNumber, function(page) {
												if(page.success) {
													var user = page.data;
													// alert(that.user.color);
													user.color = that.user.color;
													user.carNumber = that.user.carNumber;
													that.user = user;
												} else {
													alert(page.message);
												}
											});
										} else {
											alert(page.message);
										}
									});
								} else {
									alert(page.message);
								}
							})
						}
					});
				}
			},
			created() {
				/*var that = this;
				http.get("/user/get.do?openId=" + openId, function(page) {
					if(page.success) {
						var user = page.data;
						// alert(user);
						if(user) {
							that.user = user;
							that.buttonName = "解除绑定";
						}
					}
				});*/
			}
		});
	</script>

</html>